<template>
	<view class="detail-page1-container">
		<view class="header flex">
			<BackButton class="back-button" url="/pages/start/index"></BackButton>
			<image class="title" src="@/static/images/font/exercise1-tt.png" mode="aspectFit"></image>
			<image class="cactus" src="@/static/images/cactus.png" mode="aspectFit"></image>
		</view>
		<view class="content">
			<view class="section section1">
				<view class="title" v-if="section1.title">{{section1.title}}</view>
				<view class="desc" v-for="(item, i) in section1.desc" :key="i">
					{{section1.desc[i]}}
				</view>
				<view class="explain-image">
					<image class="bazi" src="@/static/images/bazi.png" mode="aspectFit"></image>
					<image class="pingshi" src="@/static/images/pingshi.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="section section2">
				<view class="title" v-if="section2.title">{{section2.title}}</view>
				<view class="desc" v-for="(item, i) in section2.desc" :key="i">
					{{section2.desc[i]}}
				</view>
			</view>
			<view class="section section3">
				<view class="title" v-if="section3.title">{{section3.title}}</view>
				<view class="desc" v-for="(item, i) in section3.desc" :key="i">
					{{section3.desc[i]}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import BackButton from '@/components/BackButton.vue'
	import { alarmReminder } from "@/utils/alarmReminder"
	export default {
		components: {
			BackButton,
		},
		onLoad() {
			alarmReminder()
		},
		data() {
			return {
				section1: {
					title: "",
					desc: ["在舒适的位置，与手机保持平行保持头部不动，然后尽量使眼球按照八字形的路径转动。每个方向停留1~2秒，每次转动10分钟左右，每天进行2~3次。", ]
				},
				section2: {
					title: "眼肌训练的重要性",
					desc: ["眼肌训练可以增强眼肌的力量，使眼睛在长时间用眼过程中不容易疲劳。可以促进眼部血液循环，为眼睛提供充足的营养和氧气，有利于眼部健康，提高视力，预防近视。", ]
				},
				section3: {
					title: "注意事项",
					desc: ["避免用力过猛：在进行眼肌训练时，要注意力度适中，避免用力过猛，以免损伤眼部组织。", "保持头部稳定：在进行眼肌训练时，要保持头部稳定，避免晃动，以免影响训练效果。"],
				},
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.detail-page1-container {
		padding-bottom: 40upx;
		font-weight: bold;
	}

	.header {
		width: 96%;
		margin: 0 auto;
		margin-bottom: 50upx;
		padding-top: 112upx;
		justify-content: space-between;

		.title {
			width: 380upx;
			height: 90upx;
			margin-top: 28upx;
			margin-left: 25upx;
		}

		.cactus {
			width: 82upx;
			height: 82upx;
			margin-top: 28upx;
			margin-right: 80upx;
			opacity: 0.68;
		}
	}

	.section {
		margin: 0 42upx;
		margin-top: 20upx;
		text-align: center;
		letter-spacing: 0.05em;

		&.section2,
		&.section3 {
			margin: 0 60upx;
			padding-bottom: 28upx;
		}

		&.section2 {
			border-bottom: 6upx solid #F4F4F4;
			margin-bottom: 68upx;
		}

		.title {
			font-size: 40upx;
			font-weight: bold;
			text-align: initial;
			color: #3D3D3D;
			margin-bottom: 30upx;
		}

		.desc {
			line-height: 1.5;
			text-align: initial;
			color: #6D6A6A;
		}

		.bazi {
			width: 700upx;
			height: 360upx;
			margin-top: -32upx;
		}

		.pingshi {
			width: 230upx;
			height: 100upx;
			margin-top: 20upx;
			margin-bottom: 45upx;
		}

	}
</style>